<template>
	<view class="lease-order-detail">
		<!-- Header -->
		<view class="header">
			<!-- Header the Background -->
			<!-- <view class="header-bg"></view> -->
			<!-- Header the Content -->
			<view class="header-content" :class="[orderStatus == 8?'header-contentclose':'']">
				<!-- 待付款 -->
				<template v-if="orderStatus == 0">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/dfk.png" mode="aspectFit">
							</image>
						</view>
						<view class="">

							<view class="">
								<view class="header-title">待付款</view>
							</view>
							<view class="header-value" v-if="orderInfo.order_close_time!=0">
								<text>支付剩余</text>
								<u-count-down separator="zh" font-size="26" separator-size="26" color="#ffffff"
									separator-color="#ffffff" bg-color="rgba(0, 0, 0, 0)" :show-days="false"
									:show-hours="false" :show-border="false" :timestamp="payCountDown"
									@end="endPayCountDown" />
								<text>自动关闭</text>
							</view>
						</view>
					</view>
				</template>
				<!-- 待发货 -->
				<template v-else-if="orderStatus == 1">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/dfh.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">待发货</view>
							<view class="header-value">支付成功，等待商家处理，请保持手机通畅，耐心等候发货</view>
						</view>
					</view>

				</template>
				<!-- 待收货 -->
				<template v-else-if="orderStatus == 2">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/dsh.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">待收货</view>
							<view class="header-value">商品已发货，收到物品无误后，请确认收货，感谢您的配合</view>
						</view>
					</view>
				</template>
				<!-- 待归还 -->
				<template v-else-if="orderStatus == 3 || orderStatus == 4">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/dfk.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">待归还</view>
							<view class="header-value">请在{{orderInfo.lease_end_date}}前归还，逾期可能产生额外费用</view>
						</view>
					</view>

				</template>
				<!-- 已到期 -->
			<!-- 	<template v-else-if="orderStatus == 4">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/pendingShipment.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">已到期</view>
							<view class="header-value">交易已完成</view>
						</view>
					</view>
				</template> -->
				<!-- 归还中 -->
				<template v-else-if="orderStatus == 5">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/ghz.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">归还中</view>
							<view class="header-value">您已发起归还申请。待商家收到物品并确认无误后，系统将自动完成订单处理，同时退还商品押金。感谢您的耐心等待与配合</view>
						</view>
					</view>
				</template>
				<!-- 已完成 -->
				<template v-else-if="orderStatus == 6">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/ywc.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">已完成</view>
							<view class="header-value">订单已完成，感谢您的使用，欢迎下次下单</view>
						</view>
					</view>
				</template>
				<template v-else-if="orderStatus == 7">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/pendingShipment.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">已买断</view>
							<view class="header-value">交易已完成</view>
						</view>
					</view>
				</template>
				<template v-else-if="orderStatus == 8">
					<view class="orderDetails">
						<view class="">
							<image src="@/bundle/static/images/ygb.png" mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="header-title">已关闭</view>
							<view class="header-value">您的订单已取消，如有支付金额将在3个工作日内原路返还</view>
						</view>
					</view>
				</template>
				<!-- 已关闭 -->
			</view>
		</view>

		<!-- Main -->
		<view class="main">
			<!-- 实名认证 -->
			<view class="container row-between" v-if="orderStatus==0 || orderStatus==1">
				<view class="">
					<view class="authentication">
						<image class="authenImg" src="@/bundle/static/images/cardIcon.png" mode="aspectFit" />
						<text>{{orderInfo.is_realname_auth?'已实名认证':'实名认证'}}</text>
					</view>
					<view class="authenText">{{orderInfo.is_realname_auth?'您已完成实名认证':'完成认证，提高您的审核通过率!'}}</view>
				</view>
				<view class="order-button order-button--active" @tap="onCard(orderInfo.id)" v-if="!orderInfo.is_realname_auth">
					去认证
				</view>
				<view class="order-button order-button--inactive" @tap="onCard(orderInfo.id)" v-else>
					去看看
				</view>
			</view>

			<view class="container order-shouqi" v-if="!Array.isArray(orderInfo.bill) && orderStatus!=6">
				<view class="row-between">
					<view class="order-zujin">
						<view class="zujin-meny row">
							<text>￥{{orderInfo.bill.pay_amount}}</text>
							<view class="zujin-yuqi" v-if="orderInfo.bill.status==2">
								<u-icon name="error-circle" color="#E95643" size="24"></u-icon>
								<text>已逾期</text>
							</view>
						</view>
						<view class="zujin-time">
							请于{{orderInfo.bill.estimated_time}}前完成支付本期租金
						</view>
					</view>
					<view class="">
						<button @click="goPay(orderInfo.bill.id)">去支付</button>
					</view>
				</view>
				<view class="row-between zuqi-day">
					<view class="">
						<text v-if="orderInfo.bill.is_relet==1">续租</text>
						<text>第{{orderInfo.bill.current_periods}}期</text>
						<text>({{orderInfo.bill.start_time}}至{{orderInfo.bill.end_time}})</text>
					</view>
					<view class="" @click="onOrderRepayment">
						<text>查看</text>
						<u-icon name="arrow-right" color="#C38B61" size="22"></u-icon>
					</view>
				</view>
			</view>
			<!-- Address -->
			<view class="address-maring">
				<view class="row address-back">
					<!-- <image class="icon-md mr20" src="/static/images/icon_address.png" /> -->
					<view>
						<!-- 联系人 -->
						<view class="row address-consignee">
							<text>{{ orderInfo.consignee }}</text>
							<text class="ml10">{{ orderInfo.mobile }}</text>
						</view>
						<!-- 地址 -->
						<view class="address-delivery">{{ orderInfo.delivery_address }}</view>
					</view>
				</view>
				<image src="@/bundle/static/images/address_soil.png" class="addres-imgline" />
			</view>



			<!-- Goods -->
			<view class="container mt20">
				<lease-order-goods :image="goodsInfo.goods_image">
					<template #name>{{ goodsInfo.goods_name }}</template>
					<template #name>{{ goodsInfo.goods_name }}</template>
					<template #specs>
						<text class="mr10">规格：租完可还/买断</text>
						<!-- <text>{{item.order_goods.goods_item_str}}{{ getPeriodsUnit(item.periods_attribute) }}</text> -->
						<text>{{goodsInfo.goods_item_str}}</text>
					</template>
					<template #tenancy>
						<text class="mr10">租期：</text>
						<text>{{orderInfo.lease_start_date}}至{{orderInfo.lease_end_date}}</text>
					</template>
					<template #num>
						<text class="mr10">数量：</text>
						<text>{{goodsInfo.goods_num}}</text>
					</template>
				</lease-order-goods>
			</view>

			<!-- Price Details -->
			<view class="periods-price container">
				<!-- 首期实付金额 -->
				<view class="periods-price-item">
					<view>
						<view class="periods-price-row row-between" style="font-size: 32rpx; color: #000000e6;">
							<view>首期实付金额</view>
							<view style="font-size: 36rpx;">¥{{ orderInfo.goods_first_rent }}</view>
						</view>
						<view class="periods-price-row row-between">
							<view class="color-left">剩余租期</view>
							<view class="color-right">¥{{ orderInfo.goods_first_rent }}*{{ orderInfo.periods }}期</view>
						</view>
						<view class="periods-price-row row-between">
							<view class="color-left">总租金</view>
							<view class="color-right">{{ orderInfo.total_goods_rent }}</view>
						</view>
						<view class="periods-price-row row-between">
							<view class="color-left">配送方式</view>
							<view class="color-right">{{ orderInfo.delivery_type_desc }}</view>
						</view>
						<view class="periods-price-row row-between">
							<view class="color-left">运费</view>
							<view class="color-right">¥{{ orderInfo.shipping_price }}</view>
						</view>
					</view>
				</view>

				<!-- 商品押金 -->
				<view class="periods-price-item" style="border-bottom: 1px solid #E5E5E5;">
					<view>
						<view class="periods-price-row row-between" style="font-size: 32rpx; color: #000000e6;">
							<view>商品押金</view>
							<view style="font-size: 36rpx;">¥{{ orderInfo.total_deposit }}</view>
						</view>
						<view class=" periods-price-row row-between">
							<view class="color-left">信用减免</view>
							<view class="color-right">- ¥{{ orderInfo.credit_deposit }}</view>
						</view>
						<template>
							<view class=" periods-price-row row-between">
								<view class="color-left">冻结押金</view>
								<view class="color-right">- ¥{{ orderInfo.freeze_deposit || '0.00' }}</view>
							</view>
						</template>
						<view class=" periods-price-row row-between">
							<view class="color-left">押金限时活动</view>
							<view class="color-right">{{ deposit( orderInfo.change_deposit) }}</view>
						</view>
						<view class=" periods-price-row row-between">
							<view class="color-left">押金冻结方式</view>
							<view class="color-right">{{orderInfo.freeze_deposit_type==0?'未冻结':'支付宝资金授权'}}</view>
						</view>
						<!-- <view class="lighter periods-price-row row-between">
						    <view>优惠券</view>
						    <view>-¥{{ orderInfo.discount_amount }}</view>
						</view> -->
					</view>
					<!-- <view class="row-between periods-price-title">
					    <view class="ornament">应付金额</view>
					    <view class="ornament">¥{{ goodsInfo.first_pay_amount }}</view>
					</view> -->
				</view>
				<!-- 配件 -->
				<view class="contain goods-accessory mt20" v-for="(item,index) in goodsInfo.accessory_info"
					:key="index">
					<view class="lg mb20 gift-title">{{item.name}}</view>
					<view class="accessory-item" v-for="(item2,index2) in item.accessory_item" :key="index2">
						<view class="flex1 line1">{{ item2.name }}</view>
						<view class="row">
							<view class="mr20 accessory-item-price" v-if="Number(item2.price)!=0">￥{{ item2.price }}</view>
							<view>*{{ item2.num }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="periods-price-item">
					<view class="periods-price-total">
						<text class="periods-price-total-title">合计:</text>
						<price :content="goodsInfo.first_pay_amount" mainSize="38rpx" minorSize="24rpx" :isPrefix="true"
							:isSuffix="false" />
					</view>
				</view> -->
				<!-- 商品押金 -->
				<!-- 			    <view class="periods-price-item">
			        <view class="row-between periods-price-title">
			            <view>商品押金</view>
			            <view>¥{{ goodsInfo.deposit }}</view>
			        </view>
			        <view>
			            <view class="lighter periods-price-row row-between">
			                <view>保证金</view>
			                <view>¥{{ goodsInfo.deposit }}</view>
			            </view>
			            <view class="lighter periods-price-row row-between">
			                <view>芝麻信用抵扣</view>
			                <view>-¥0</view>
			            </view>
			        </view>
			    </view> -->
				<!-- 				<view class="periods-price-total">
					<text class="periods-price-total-title">合计:</text>
					<price
					  :content="goodsInfo.first_pay_amount" 
					  mainSize="38rpx" 
					  minorSize="24rpx" 
					  :isPrefix="true"
					/>
				</view> -->
			</view>

			<!-- 	Remark
			<view class="container remark">
				<view class="remark-title">买家留言</view>
				<view class="remark-content">{{ orderInfo.user_remark }}</view>
			</view> -->

			<!-- Express -->
			<view class="container">
				<!-- 订单编号 -->
				<view class="express-row">
					<view class="express-row-title">订单编号</view>
					<view class="express-row-content row-between">
						<view>{{ orderInfo.order_sn }}</view>
						<view class="express-button--copy" @tap="copyText(orderInfo.order_sn)">
							<image src="@/bundle/static/images/detaid-copy.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<!-- 下单时间 -->
				<view class="express-row" style="display: flex;justify-content: space-between;">
					<view class="express-row-title">下单时间</view>
					<view class="express-row-content">{{ orderInfo.create_time }}</view>
				</view>
				<!-- 支付方式 -->
				<view class="express-row">
					<view class="express-row-title">支付方式</view>
					<view class="express-row-content">{{ getPayWay(orderInfo.pay_way) }}</view>
				</view>
				<!-- 备注 -->
				<view class="express-row">
					<view class="express-row-title">备注</view>
					<view class="express-row-content">{{orderInfo.user_remark}}</view>
				</view>

			</view>
		</view>


		<!-- Footer -->
		<!-- 		<view class="order-footer">
			<block v-for="index in getButtons(orderInfo.order_status)" :key="index">
				<view class="order-button" :class="[buttonList[index]['class']]">
					{{ buttonList[index].name }}
				</view>
			</block>
		</view> -->

		<view class="order-footer" v-if="orderInfo.order_status!=8">
			<block v-for="index in getButtons(orderInfo.order_status)" :key="index">
				<view class="order-button" :class="[buttonList[index]['class']]"
					@tap="onOrderButton(buttonList[index].key)">
					{{ buttonList[index].name }}
				</view>
			</block>
			<!-- 合同 -->
			<template v-if="orderInfo.order_status == 1">
				<template v-if="orderInfo.contract_status == 0">
					<view class="order-button order-button--inactive">待合同生成</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 1">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">上传合同</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 2">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">合同审核中
					</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 3">
					<view class="order-button order-button--normal" @tap="onOrderButton(buttonList[12].key)">合同审核通过
					</view>
				</template>
				<template v-else-if="orderInfo.contract_status == 4">
					<view class="order-button order-button--error" @tap="onOrderButton(buttonList[12].key)">合同审核失败
					</view>
				</template>
			</template>
		</view>

		<!-- Widget -->
		<view>
			<!-- 取消订单 -->
			<u-modal v-model="showCloseOrderModal" content="取消订单" :show-cancel-button="true"
				@confirm="handleOrderClose" />

			<!-- 删除订单 -->
			<u-modal v-model="showDelOrderModal" content="删除订单" :show-cancel-button="true" @confirm="handleOrderDel" />

			<!-- 确认收货 -->
			<u-modal v-model="showConfirmOrderModal" content="确认收货" :show-cancel-button="true"
				@confirm="handleOrderConfirm" />

			<!-- 续租 -->
			<u-popup v-model="showReletOrderPopup" mode="center" border-radius="20">
				<view class="relet">
					<view class="relet-title">续租</view>
					<view class="relet-content">
						<view class="relet-label">请选择租期</view>
						<view class="relet-list">
							<block v-for="item in reletList" :key="item.periods_id">
								<view class="relet-item" :class="{'relet-item--active': relet == item.periods_id}"
									@tap="relet = item.periods_id">
									{{ item.name }}
								</view>
							</block>
						</view>
					</view>
					<view class="relet-widget">
						<view class="relet-cancel" @tap="showReletOrderPopup = false">取消</view>
						<view class="relet-confirm" @tap="handleRelet">确认</view>
					</view>
				</view>
			</u-popup>

			<!-- 还机 -->
			<u-popup v-model="showReturnOrderPopup" mode="center" border-radius="20">
				<view class="return">
					<view class="return-title">温馨提示</view>
					<view class="return-content">您当前租期未到期，提前还机需支付相应的违约金，是否确认还机？</view>
					<view class="return-widget">
						<view class="return-cancel" @tap="showReturnOrderPopup = false">取消</view>
						<view class="return-confirm" @tap="goReturnOrder">确认</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 还击支付违约金 -->
		<u-popup v-model="showReturn" mode="bottom" border-radius="14" length="50%" closeable="true">
			<view class="return-pay">
				<view class="">
					违约金支付
				</view>
				<view class="pay-money">
					￥{{payReturn.falsify_price}}
				</view>
				<view class="row-between">
					<text>归还日期</text>
					<text>{{payReturn.expire_time}}</text>
				</view>
				<view class="row-between">
					<text>当前时间</text>
					<text>{{payReturn.current_time}}</text>
				</view>
				<view class="mt30">
					<u-button type="success" @click="submitPay">支付</u-button>
				</view>

			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		leaseOrderCancel, // 取消订单
		leaseOrderDel, // 删除订单
		getLeaseOrderDetail, // 订单详情
		leaseOrderConfirm, // 确认收货
		leaseOrderRelet, // 续租
		leaseReturnCheck, // 还机验证
		returnRepayment, //判断是否违约
		orederBuyup
	} from '@/api/lease.js';
	import {
		prepay,
		getAlipayPayStatus
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		copy
	} from '@/utils/tools'

	export default {
		data() {
			return {
				orderID: 0, // 订单ID
				orderStatus: 0, // 订单状态
				orderInfo: {}, // 订单信息
				goodsInfo: {}, // 商品信息
				showConfirmOrderModal: false, // 确认收货Modal
				showDelOrderModal: false, // 删除订单Modal
				showCloseOrderModal: false, // 取消订单Modal

				showReletOrderPopup: false, // 续租 Popup
				showReturnOrderPopup: false, // 还机 Popup
				reletList: [], // 续租期 数据列表
				relet: '', // 选择的租期
				showReturn: false,
				payReturn: {},
				// 按钮列表
				buttonList: {
					0: {
						key: 'pay',
						name: '去付款',
						class: 'order-button--active'
					},
					1: {
						key: 'repayment',
						name: '去还款',
						class: 'order-button--active'
					},
					2: {
						key: 'receive',
						name: '确认收货',
						class: 'order-button--normal'
					},
					3: {
						key: 'evaluate',
						name: '去评价',
						class: 'order-button--normal'
					},
					4: {
						key: 'return',
						name: '归还',
						class: 'order-button--inactive'
					},
					5: {
						key: 'buy',
						name: '买断',
						class: 'order-button--inactive'
					},
					6: {
						key: 'buy_detail',
						name: '买断详情',
						class: 'order-button--normal'
					},
					7: {
						key: 'return_detail',
						name: '归还详情',
						class: 'order-button--normal'
					},
					8: {
						key: 'relet',
						name: '续租',
						class: 'order-button--inactive'
					},
					9: {
						key: 'close',
						name: '取消订单',
						class: 'order-button--inactive'
					},
					10: {
						key: 'express',
						name: '查看物流',
						class: 'order-button--inactive'
					},
					11: {
						key: 'del',
						name: '删除订单',
						class: 'order-button--inactive'
					},
					12: {
						key: 'contract',
						name: '上传合同',
						class: 'order-button--normal'
					},
					13: {
						key: 'repayment',
						name: '账单详情',
						class: 'order-button--active'
					},
					14: {
						key: 'service',
						name: '联系客服',
						class: 'order-button--inactive'
					}
				}
			}
		},

		computed: {
			// 每天多少钱
			oneDayPrice() {
				const unit = this.goodsInfo.periods_attribute;
				const issueRent = this.goodsInfo.issue_rent;
				switch (unit) {
					// case 'is_week': return (issueRent / 7).toFixed(1);
					// case 'is_month': return (issueRent / 30).toFixed(1);
					case 'is_week':
						return Number((issueRent / 7).toString().match(/^\d+(?:\.\d{0,2})?/));
					case 'is_month':
						return Number((issueRent / 30).toString().match(/^\d+(?:\.\d{0,2})?/));
				}
			},

			// 支付剩余倒计时
			payCountDown() {
				const orderInfo = this.orderInfo;

				const now = new Date().getTime() / 1000;
				const create = new Date(orderInfo.create_time).getTime() / 1000;
				const end = create + orderInfo.order_close_time;

				return end - now;
			}
		},

		methods: {
				
			deposit(str){
				if(Number(str)==0){
					return '-￥'+str;
				}else{
					if(Number(str)>0) return "￥"+str;
					let originalString = str;
					let insertString = "￥";
					let insertPosition = 1; // 在第5个字符的位置插入
					// 使用模板字符串插入数据
					if (originalString !== undefined && originalString !== null) {
					  let resultString = `${originalString.substring(0, insertPosition)}${insertString}${originalString.substring(insertPosition)}`;
					   return resultString
					} 
					
				}
			},
			
			// 输出分期单位
			getPeriodsUnit(value) {
				switch (value) {
					case 'is_week':
						return '周';
					case 'is_month':
						return '个月';
				}
			},

			// 支付方式
			getPayWay(type) {
				switch (type) {
					case 1:
						return '微信支付';
					case 2:
						return '支付宝支付';
					case 3:
						return '余额支付';
				}
			},

			// 复制文本
			copyText(value) {
				copy(value)
				// uni.setClipboardData({
				// 	data: value,
				// 	success() {
				// 		uni.showToast({
				// 			title: '复制成功',
				// 			icon: 'success'
				// 		});
				// 	}
				// });
			},

			// 获取该订单应有的按钮
			getButtons(status, order) {
			
				switch (status) {
					// 待付款
					case 0:
						return [ 9, 0];
						// 待发货
					case 1:
						return [ 9];
						// 待收货
					case 2:
			
						return [ 10, 2];
			
						// 待归还
					case 3: {
						const btns = [4, 5, 8, 13];
			
						return btns;
					}
					// 已过期
					case 4: {
						const btns = [4, 5, 8, 13];
						return btns;
					}
					// 归还中
					case 5:
						return [ 7, 13];
			
						//已完成
					case 6:
						return [ 10, 13];
						//已买断
					case 7:
						return [ 10, 13];
				}
			},


			// 订单按钮
			onOrderButton(event) {
				console.log(event,6666)
				switch (event) {
					// 立即付款
					case 'pay':
						return this.onOrderPay();
						// 去还款
					case 'repayment':
						return this.onOrderRepayment();
						// 确认收货
					case 'receive':
						return this.onOrderReceive();
						// 去评价
					case 'evaluate':
						return this.onOrderEvaluate();
						// 还机
					case 'return':
						return this.onOrderReturn();
						// 买断
					case 'buy':
						return this.onOrderBuy();
						// 买断详情
					case 'buy_detail':
						return this.onOrderBuyDetail();
						// 还机详情
					case 'return_detail':
						return this.onOrderReturnDetail();
						// 续租
					case 'relet':
						return this.onOrderRelet();
						// 取消订单
					case 'close':
						return this.onOrderClose();
						// 查看物流
					case 'express':
						return this.onOrderExpress();
						// 删除订单
					case 'del':
						return this.onOrderDel();
						// 合同
					case 'contract':
						return this.onContract();
						// 联系客服
					case 'service':
						return this.onService();
				}
			},
			
			goPay(Iid){
				let id = Iid;
				uni.navigateTo({
					url: `/bundle/pages/lease_bill/laese_bill_stages?id=${Iid}`
				})
			},

			// 点击合同
			onContract() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_contract/lease_contract?id=${id}`
				})
			},

			// 按下立即付款按钮
			onOrderPay() {
				const payWay = this.orderInfo.pay_way;
				const id = this.orderID;

				//跳转支付页面
				uni.navigateTo({
					url: `/pages/payment/payment?from=lease_order&order_id=${id}`
				})

				// prepay({
				// 	from: 'lease_order',
				// 	order_id: id
				// }).then(res => {
				// 	const code = res.code;
				// 	const data = res.data;

				// 	switch (code) {
				// 		// 微信支付
				// 		case 1:
				// 			return this.handlePayWeChat(data);
				// 			// 支付宝支付
				// 		case 20001:
				// 			return this.handlePayAlipay(data);
				// 			// 余额支付
				// 		case 10001:
				// 			return;
				// 	}
				// });
			},

			// 按下去还款按钮
			onOrderRepayment() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_bill/lease_bill?id=${id}`
				})
			},

			// 按下确认收货按钮
			onOrderReceive() {
				this.showConfirmOrderModal = true;
			},

			// 按下去评价按钮
			onOrderEvaluate() {
				const id = this.orderID;
				const goodsID = this.orderInfo?.lease_order_goods[0]?.id;
				uni.navigateTo({
					url: `/bundle/pages/lease_goods_reviews/lease_goods_reviews?id=${id}&goods_id=${goodsID}`
				});
			},

			// 按下还机按钮
			onOrderReturn() {
				const id = this.orderID;
				returnRepayment({
					id,
					action: 'info'
				}).then(res => {
					if (res.data.is_pay) {
						this.showReturn = true;
						this.payReturn = res.data;
					} else {
						uni.navigateTo({
							url: `/bundle/pages/lease_goods_return/lease_goods_restitution?id=${id}`
						})
					}

					// const code = res.code;
					// console.log(res);
					// if (code == 1) {
					// 	uni.navigateTo({
					// 		// url: `/bundle/pages/lease_return_detail/lease_return_detail?id=${id}`
					// 		url: `/bundle/pages/lease_return_express/lease_return_express?id=${id}`
					// 	})
					// } else {
					// 	this.showReturnOrderPopup = true;
					// }
				})
			},
			//点击支付违约金
			submitPay() {
				const id = this.orderID;
				returnRepayment({
					id: id,
					action: 'submit'
				}).then(res => {
					if (res.code == 1) {
						const data = res.data;
						//跳转支付页面
						uni.redirectTo({
							url: `/pages/payment/payment?from=${data.from}&order_id=${data.order_id}`
						})
					}
				})
			},

			// 按下买断按钮
			onOrderBuy() {
				const id = this.orderID;
				orederBuyup({
					id: id,
					action: 'info'
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: `/bundle/pages/lease_pay_buy/lease_pay_buy?id=${id}`
						})
					}

				})
			},

			// 按下买断详情按钮
			onOrderBuyDetail() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_buy_detail/lease_buy_detail?id=${id}`
				})
			},

			// // 按下还机详情按钮
			// onOrderReturnDetail() {
			// 	const id = this.orderID;
			// 	uni.navigateTo({
			// 		url: `/bundle/pages/lease_return_detail/lease_return_detail?id=${id}`
			// 	})
			// },
			//按下还机详情按钮
			onOrderReturnDetail() {
				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_goods_return/lease_goods_returndetail?id=${id}`
				})
			},

			// 按下续租按钮
			onOrderRelet() {

				const id = this.orderID;
				uni.navigateTo({
					url: `/bundle/pages/lease_order_relet/lease_order_relet?id=${id}`
				})

				// uni.showLoading({
				// 	title: '加载中'
				// });
				// const id = this.orderID;
				// leaseOrderRelet({
				// 	id,
				// 	action: 'info'
				// }).then(res => {
				// 	uni.hideLoading();
				// 	if (res.code != 1) return;
				// 	this.showReletOrderPopup = true;
				// 	const data = res.data;
				// 	this.reletList = data;
				// 	this.relet = data[0].periods_id;
				// });
			},

			// 按下取消订单按钮
			onOrderClose(id) {
				this.showCloseOrderModal = true;
			},

			// 按下查看物流按钮
			onOrderExpress() {
				const id = this.orderID;
				// uni.navigateTo({
				// 	url: `/bundle/pages/goods_logistics/goods_logistics?id=${id}`
				// })
				uni.navigateTo({
					url: `/bundle/pages/lease_order_express/lease_order_express?id=${id}`
				})
			},

			// 按下删除订单按钮
			onOrderDel() {
				this.showDelOrderModal = true;
			},


			// 取消订单处理
			handleOrderClose() {
				const id = this.orderID;
				leaseOrderCancel({
					id
				}).then(res => {
					this.initData();
				});
			},

			// 删除订单处理
			handleOrderDel() {
				const id = this.orderID;
				leaseOrderDel({
					id
				}).then(res => uni.navigateBack());
			},

			// 确认收货处理
			handleOrderConfirm() {
				const id = this.orderID;
				leaseOrderConfirm({
					id
				}).then(res => this.initData());
			},

			// 续租处理
			handleRelet() {
				const id = this.orderID;

				leaseOrderRelet({
					id,
					periods_id: this.relet,
					action: 'submit',
				}).then(res => {
					this.showReletOrderPopup = false;
					if (res.code != 1) return;
					uni.showToast({
						title: '续租成功',
						icon: 'success'
					});
				});
			},

			// 前往还机
			goReturnOrder() {
				const id = this.orderID;
				this.showReturnOrderPopup = false;
				uni.navigateTo({
					url: '/bundle/pages/lease_goods_return/lease_goods_return' +
						'?id=' + id
				})
			},
			//联系客服
			onService() {
				uni.navigateTo({
					url: '/bundle/pages/contact_offical/contact_offical'

				});
			},


			// 微信支付
			handlePayWeChat(data) {
				const id = this.orderID;

				wxpay(data).then(res => {
					if (res == 'success') {
						this.initData();
						uni.navigateTo({
							url: '/bundle/pages/lease_pay_result/lease_pay_result' +
								'?id=' + id
						});
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				})
			},

			// 支付宝支付
			handlePayAlipay(data) {
				const id = this.orderID;

				// #ifdef H5
				alipay(data);
				// #endif


				// #ifdef MP-ALIPAY
				const tradeNo = data?.data?.trade_no;
				my.tradePay({
					tradeNO: tradeNo,
					success: (res) => {
						getAlipayPayStatus({
							trade_no: tradeNo
						}).then(res => {
							if (res.tradeStatus == 'TRADE_SUCCESS') {
								uni.redirectTo({
									url: `/bundle/pages/lease_pay_result/lease_pay_result?id=${this.billInfo.id}`
								})
							} else {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (res) => {
						console.log(res);
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
				// #endif

			},

			// 初始化数据
			initData() {
				// 请求订单数据
				getLeaseOrderDetail({
					id: this.orderID
				}).then(res => {
					if (res.code != 1) return;
					const data = res.data;
					// 初始化数据
					this.orderInfo = data;
					this.orderStatus = data.order_status;
					this.goodsInfo = data.order_goods;
				});
			},

			// 待支付倒计时结束
			endPayCountDown() {
				this.initData();
			},
			// 实名认证
			onCard(id) {
				uni.navigateTo({
					url: '/bundle/pages/lease_order_card/lease_order_card?id='+id
				});
			}
		},

		onLoad(options) {
			const id = options.id;
			this.orderID = id;
		},

		onShow() {
			this.initData();
		}
	}
</script>


<style scoped lang="scss">
	.container {
		padding: 34rpx 24rpx;
		margin-bottom: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.address-maring {
		position: relative;
	}

	.addres-imgline {
		width: 100%;
		height: 4rpx;
		position: absolute;
		bottom: 0;
	}

	.address-back {
		padding: 34rpx 24rpx;
		margin-bottom: 0rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.lease-order-detail {
		padding-bottom: 160rpx;
	}

	.header {
		position: relative;
	}

	.header-content {
		position: relative;
		padding: 20rpx 40rpx;
		color: #FFFFFF;
		padding-top: 40rpx;
		padding-bottom: 50rpx;
		background-image: linear-gradient(to bottom, #24A3FF, #3187FD);
		/* #ifdef MP-ALIPAY */
		height: 300rpx;
		/* #endif */
	}

	/* #ifndef MP-ALIPAY  || H5 */
	.header-content::after {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		display: block;
		content: '';
		width: 100%;
		height: 260rpx;
		background-image: linear-gradient(to bottom, #24A3FF, #3187FD);
	}

	/* #endif */

	.header-contentclose {
		height: 260rpx;
		background: linear-gradient(126deg, #B7BCBE 28.96%, #7C8084 100%);
	}

	.header-title {
		font-weight: 900;
		font-size: 40rpx;
		margin-bottom: 8rpx;

	}

	.header-value {
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff99;
	}


	.main {
		padding: 20rpx;
		margin-top: -50rpx;
		position: relative;
		/* #ifdef MP-ALIPAY */
		position: relative;
		margin-top: -100rpx;
		/* #endif */
	}

	.address-consignee {
		font-size: 32rpx;
		font-weight: 500;
		color: #000000e6;
		align-items: flex-end;
	}

	.address-delivery {
		font-size: 26rpx;
		color: #00000066;
		margin-top: 20rpx;
	}


	.periods-price {
		padding: 0 20rpx;
	}

	.periods-price-item {
		padding: 24rpx 6rpx;
	}

	.periods-price-item:nth-child(n+2) {
		border-top: 1px solid #E5E5E5;
	}

	.periods-price-title {
		padding: 10rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.periods-price-row {
		padding: 16rpx 0;
		font-size: 28rpx;

	}

	.color-left {
		color: #00000099;
	}

	.color-right {
		color: #00000066;
	}

	.periods-price-total {
		padding: 30rpx 0;
		text-align: right;
	}

	.periods-price-total-title {
		margin-right: 10rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.remark {
		display: flex;
		font-size: 28rpx;
	}

	.remark-title {
		flex-shrink: 0;
		color: #333333;
	}

	.remark-content {
		box-sizing: border-box;
		margin-left: 30rpx;
		color: #999999;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
	}

	.express-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;

	}

	.express-row:nth-child(n+2) {
		margin-top: 20rpx;
	}

	.express-row-title {
		color: #00000099;
		flex-shrink: 0;
		width: 140rpx;
	}

	.express-row-content {
		/* flex: 1; */
		margin-left: 30rpx;
		color: #00000099;
		text-align: right;
	}

	.express-button--copy {
		padding-left: 6rpx;

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.order-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		height: 168rpx;
		padding: 0 20rpx;
		padding-top: 20rpx;
		border-radius: 10px 10px 0 0;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
		background-color: #FFFFFF;
	}

	.order-button {
		box-sizing: border-box;
		padding: 14rpx 26rpx;
		border-radius: 100rpx;
		font-size: 24rpx;
	}

	.order-button:nth-child(n+2) {
		margin-left: 20rpx;
	}

	.order-button--active {
		background-color: #2482EE;
		color: #FFFFFF;
	}

	.order-button--inactive {
		border: 2rpx solid #00000033;
		background-color: #FFFFFF;
		color: #000000e6;
	}

	.order-button--normal {
		background-color: #FFFFFF;
		border: 2rpx solid #2482EE;
		color: #2482EE;
	}

	.order-button--error {
		background-color: #FFFFFF;
		border: 2px solid #FF2C3C;
		color: #FF2C3C;
	}

	.relet,
	.return {
		width: 640rpx;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
	}

	.relet-title,
	.return-title {
		padding-bottom: 30rpx;
		text-align: center;
		font-weight: 500;
		font-size: 34rpx;
		color: #333333;
	}

	.relet-label {
		font-size: 28rpx;
		color: #333333;
	}

	.relet-list {
		display: flex;
		flex-wrap: wrap;
	}

	.relet-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 152rpx;
		height: 58rpx;
		margin: 20rpx 20rpx 0 0;
		border-radius: 50px;
		font-size: 26rpx;
		color: #333333;
		background-color: #F4F4F4;
	}

	.relet-item--active {
		background-color: #E8F6FF;
		box-shadow: 0 0 0 1px #24A3FF;
		color: #24A3FF;
	}

	.relet-widget,
	.return-widget {
		display: flex;
		justify-content: space-between;
		margin-top: 84rpx;
	}

	.relet-cancel,
	.relet-confirm,
	.return-cancel,
	.return-confirm {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 268rpx;
		height: 74rpx;
		font-size: 32rpx;
		border-radius: 50px;
	}

	.relet-cancel,
	.return-cancel {
		background-color: #F6F6F6;
		color: #666666;
	}

	.accessory-item {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: #F6F6F8;
		color: #00000099;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.accessory-item-price {
			opacity: .5;
			text-decoration: line-through;
		}
	}

	.goods-accessory {
		padding: 30rpx 5rpx;
		padding-bottom: 30rpx;

	}

	.gift-title {
		color: #000000e6;

		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;

	}

	.relet-confirm,
	.return-confirm {
		background-color: #24A3FF;
		color: #FFFFFF;
	}

	.orderDetails {
		display: flex;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-right: 24rpx;
		}
	}

	.authentication {
		font-weight: 400;
		font-size: 32rpx;
		line-height: 32rpx;
		letter-spacing: 0%;

		.authenImg {
			width: 36rpx;
			height: 36rpx;
			vertical-align: bottom;
			margin-right: 6rpx;
			line-height: 32rpx;
		}

	}

	.authenText {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 28rpx;
		letter-spacing: 0%;
		color: #00000066;
		margin-top: 20rpx;
	}

	.return-pay {
		padding: 40rpx;
		text-align: center;
		font-weight: normal;
		font-size: 28rpx;
		color: #000000;

		view {
			padding: 20rpx;
		}

		.pay-money {
			font-size: 48rpx;
			margin: 40rpx 0;
		}
	}

	.order-shouqi {
		button {
			background: #2482EE;
			color: #ffffff;
			font-size: 24rpx;
			width: 156rpx;
			border-radius: 40rpx;
		}

		.order-zujin {
			.zujin-meny {
				>text:nth-child(1) {
					color: #000000e6;
					font-family: "PingFang SC";
					font-size: 36rpx;
					font-style: normal;
					font-weight: 900;
					line-height: 36rpx;
					margin-right: 20rpx;
				}

				.zujin-yuqi {
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 16rpx;
					background: #e956431a;
					display: inline-block;
					color: #e95643;
					font-size: 24rpx;
					padding: 0 12rpx;

					>text {
						margin-left: 6rpx;
					}
				}
			}
		}

		.zujin-time {
			color: #00000066;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			margin-top: 20rpx;
		}

	}

	.zuqi-day {
		margin-top: 28rpx;
		padding: 24rpx 14rpx;
		border-radius: 24rpx;
		background: #c38b611a;
		color: #c38b61;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 24rpx;

		>view:nth-child(1) {
            >text:nth-child(1){
				border: 1rpx solid #c38b61;
				border-radius: 8rpx;
				font-size: 22rpx;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
			>text:nth-child(2) {
				font-weight: 500;
			}
		}

		>view:nth-child(2) {}
	}
</style>